<template>
	<view class="padding_30">
		<view class="input-item">
			<view class="input-title">
				姓名
			</view>
			<view class="input-box">
				<input class="Input" type="text" placeholder="请输入真实姓名" :disabled="userstore.authStatusInfo.individual==1||userstore.authStatusInfo.individual==0?true:false" v-model="userstore.selfAuthInfo.name" />
			</view>
		</view>
		<view class="input-item">
			<view class="input-title">
				身份证号
			</view>
			<view class="input-box">
				<input class="Input" type="idcard" placeholder="请输入身份证号" maxlength="18" :disabled="userstore.authStatusInfo.individual==1||userstore.authStatusInfo.individual==0?true:false" v-model="userstore.selfAuthInfo.id_card" />
			</view>
		</view>
		<view class="input-item" v-if="userstore.authStatusInfo.individual==1||userstore.authStatusInfo.individual==0">
			<view class="input-title">
				实名认证
			</view>
			<view class="state">
				{{userstore.authStatusInfo.individual==1?'已认证':'审核中'}}
			</view>
		</view>
		<view class="btn" v-if="userstore.authStatusInfo.individual!=1&&userstore.authStatusInfo.individual!=0" @click="selfAuth">
			立即认证
		</view>
	</view>
</template>

<script setup>
	import {throttle} from '@/utils/utils.js'
	import {useUserStore} from '@/store/modules/user.js'
	import { ref } from 'vue';
	const userstore = useUserStore()
	const selfAuth = throttle(async()=>{
		let params = {
			check_type:'individual',
			name: userstore.selfAuthInfo.name,
			id_card: userstore.selfAuthInfo.id_card
		}
		let res = await userstore.editUserAuth(params)
		if(res.code==200){
			uni.$uv.toast('认证信息提交成功')
			setTimeout(()=>{
				uni.navigateBack()
			},500)
		}else{
			userstore.getUserAuthStatus()
			// userstore.getUserAuthInfo({type:'individual'})
		}
	},200) 
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.input-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 690rpx;
		height: 112rpx;
		margin: auto;
		margin-bottom: 30rpx;
		padding: 30rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		.input-title{
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
		}
		.input-box{
			text-align: right;
			.Input{
				font-size: 28rpx;
			}
		}
		.state{
			font-weight: 400;
			font-size: 28rpx;
			color: #67C23A;
		}
	}
	.btn{
		position: fixed;
		bottom: 30rpx;
		transform: translate(-50%,0);
		left: 50%;
	}
</style>